<template>
  <div class="login">
        <div class="login1">
            <div class="login2">
                <img src="../../../assets/image/logo.png">
                <div class="login8">欢迎登录美食校园美食分享平台</div>
            </div>
            <div class="login3">
                <div class="login4">
                <el-input style="margin-top:30px" prefix-icon="el-icon-user-solid" v-model="loginAccount" placeholder="请输入用户账号"></el-input>
                <el-input style="margin-top:30px" prefix-icon="el-icon-arrow-right" type="password" v-model="password" placeholder="请输入用户密码"></el-input>
                <div class="login5">
                </div>
                <div class="login6">
                    <div class="login7" @click="login">
                    登 录
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  import {login,getUser} from '../../../api/api' 
  export default {
    data() {
      return{
        loginAccount: '',
        password: '',
        code: "",
        verifyCode: "",
        imgData: "",
      }
    },
    methods: {
        login() {
            if(!this.loginAccount) {
                this.$message({
                    message: '请输入用户名',
                    type: 'warning'
                });
                return;
            }
            if(!this.password) {
                this.$message({
                    message: '请输入密码',
                    type: 'warning'
                });
                return;
            }
            var params = {
                loginAccount: this.loginAccount,
                password: this.password,
                type: 1,
            }
            login(params).then(res => {
                if(res.code == 1000) {
                    this.$message({
                        message: '登陆成功',
                        type: 'success'
                    });
                    var that = this
                    var token = res.data.token
                    this.$store.commit('user/setToken', token)
                    this.getUserInfo()
                    setTimeout(function() {
                        that.$router.push("/index")
                    },500)
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        getUserInfo() {
            getUser().then(res => {
                if(res.code == 1000) {
                    this.$store.commit('user/setUser', JSON.stringify(res.data))
                }
            })
        },
    },
    created() {
     
    },
    mounted() {
    }
 }
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../../../assets/image/back.jpg');
    background-size: 100% 100%;
    font-family: '黑体';
}
.login1 {
    width: 38%;
    min-height: 57%;
    background-color: #ffffff;
    border-radius: 15px;
}
.login2 {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login2>img {
}
.login3 {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login4 {
    width: 70%;
}
.login5 {
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.login5>div {
    cursor: pointer;
}
.login6 {
    width: 100%;
    display: flex;
    justify-content: center;
}
.login7 {
    margin-top: 20px;
    width: 200px;
    height: 50px;
    background-color: #DB2A5A;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    cursor: pointer;
}
.login8 {
    font-size: 25px;
    margin-left: 10px;
}
.login4>>>.el-input__inner {
  -webkit-appearance: none;
  background-color: #EEF0F3;
  background-image: none;
  border-radius: 4px;
  border: 0;
  width: 100%;
  font-family: '黑体';
}
</style>